<script setup>
// 路由相关
import { RouterLink, RouterView } from 'vue-router'
import { useRouter } from 'vue-router'
// ui 库
import {
  NLayout, NLayoutContent, NLayoutHeader, NLayoutFooter,
  NFloatButton, NIcon, NPopselect, NButton,
  NH2, NText, NFlex
} from "naive-ui"
// 图标
import {
  Apps24Regular as AppsRegular,
  Home28Regular as HomeRegular,
} from '@vicons/fluent'
//  vue 相关
import { ref, watch } from 'vue'

const router = useRouter()
console.log(router);

const menu = router.options.routes.map(item => {
  return {
    value: item.name,
    label: item?.zh || "未命名",
  }
})
menu.unshift({
  value: "",
  label: "模块选择",
  disabled: true,
})
console.log(menu);

const route_switch = ref("")
const route_name = ref("")

watch(route_switch, (newValue) => {
  if (newValue) {
    const route = menu.find(item => item.value === newValue)
    route_name.value = route?.label || ""
    if (route) {
      router.push({ name: route.value })
    }
  }
})

watch(router.currentRoute, (newValue) => {
  if (newValue) {
    route_switch.value = newValue.name
  }
})


function handleGoHome(params) {
  router.push({name:"home"})
}



</script>

<template>
  <n-layout>
    <n-layout-header>
      <NFlex align="center" style="padding: 10px">
        <NButton size="medium" type="primary" circle @click="handleGoHome">
          <NIcon :size="24">
            <HomeRegular />
          </NIcon>
        </NButton>

        <NH2 prefix="bar" style="margin: 0;">
          <NText type="primary">
            {{ route_name }}
          </NText>
        </NH2>
      </NFlex>
    </n-layout-header>
    <n-layout-content content-style="padding: 20px;">
      <RouterView />
    </n-layout-content>
    <n-layout-footer></n-layout-footer>
  </n-layout>
  <!-- 导航按钮 -->
  <n-popselect v-model:value="route_switch" :options="menu" trigger="click">
    <n-float-button :right="30" :bottom="30" :width="50" :height="50" shape="circle" position="fixed">
      <n-icon :size="24">
        <AppsRegular />
      </n-icon>
    </n-float-button>
  </n-popselect>

</template>

<style scoped></style>
